/**
 * Created by chencheng on 17-8-31.
 */

import { Component } from 'react';



import T from 'utils/T';
// import Bar from 'templates/ToolComponents/D3Charts/Bar';
import './index.scss';

export default class TextCarousel extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {
        let textCarouselBox = this.textCarouselBox;
        this.textCarousel();
    }

    textCarousel = () => {

        let data = ['穿衣指南', '沙发上的', '爱的方式', '对方是否'];
        // 追加操作，无缝轮播
        data = data.concat(data[0]);

        let $textBox = $(this.textCarouselBox).find('.innerBox');
        data.forEach(function (item) {
            $textBox.append('<div class="fontShadow item"><div class="textMain">' + item + '</div><div class="textSub">' + item + '</div></div>');
        });

        let items = $textBox.find('.item'); // 轮播循环体
        let height = items.first().height();
        let itemsLen = data.length;

        let interval = 2000; // interval 自动轮播间隔时间
        let autoPlay = true; // autoPlay 是否开启自动轮播
        // let liWdith = $(textCarouselBox)..height(); // autoPlay 是否开启自动轮播
        let run = null;
        let i = 0;

        autoPlay && auto();
        function auto() {
            run = setInterval(function () {
                i++;
                if (i === itemsLen) {
                    $textBox.css({ marginTop: 0 });
                    i = 1;
                }
                move();
            }, interval);
        }
        function move() {
            $textBox.stop().animate({
                marginTop: -height * i
            }, 500, 'swing');
        }
        $textBox.hover(function () {
            autoPlay && clearInterval(run);
        }, function () {
            autoPlay && auto();
        });

    };

    render() {

        return (
            <div>

                <div className="percent_Box">
                    <div className="textCarouselBox" ref={textCarouselBox => (this.textCarouselBox = textCarouselBox)}>
                        <div className="innerBox">

                        </div>
                    </div>

                </div>


            </div>
        );
    }
}

